<#include "common/main.html">
<#macro bodyId>common-edit</#macro>
<#macro content>

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main ty-common-page">
    <h1 class="page-header">修改配置
        <div class="btns">
            <a class="btn btn-primary" href="/sys/config/list">返回系统配置管理</a>
        </div>
    </h1>

    <form class="form-horizontal ac-form" role="form">

        <div class="form-group">
            <label class="col-sm-2 control-label required">key：</label>
            <div class="col-sm-3">
                <input class="form-control ac-form-item" name="configKey" value="${commonConfig.configKey}" readonly required/>
            </div>
            <label class="col-sm-2 control-label required">配置描述：</label>
            <div class="col-sm-3">
                <input class="form-control ac-form-item" name="remark" value="${commonConfig.remark}" readonly required/>
            </div>
        </div>

		<div class="form-group">
		    <label class="col-sm-2 control-label required">value：</label>
            <div class="col-sm-8">
                <textarea class="form-control ac-form-item" placeholder="" rows="6" name="configValue" id="input-id1" required>${commonConfig.configValue}</textarea>
            </div>
            
			<div class="col-sm-2">
				<button id="btn-id1" class="btn btn-default" type="button">请上传图片</button> 
			</div>
			<div class="col-sm-4 col-sm-offset-2" style="margin-top: 15px;">
				<image class="upload-img" <#if commonConfig.configValue != null && commonConfig.configValue != ''>src="${commonConfig.configValue}"</#if> id="upload-img1"  width="300"  />
			</div>
			<div class="col-sm-4" style="margin-top: 15px;">
				<ul class="pic-list">
					<li>
						<div class="progress">
							<div class="progress-bar" style="width: 0%;" id="progress-bar1">0%</div>
						</div>
					</li>
				</ul>
			</div>
		</div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-8">
                <button type="submit" class="btn btn-success ">保存</button>
            </div>
        </div>
    </form>

</div>

<script>
    var config = {
    	    swf: '${rc.contextPath}/static/lib/uploadify/uploadify.swf',
    	    save: '/sys/config/saveOrUpdate',
    	    uploadApi:'${rc.contextPath}/image/upload',
    	    successRedirectApi:'${rc.contextPath}/sys/config/list'
    }
</script>

</#macro>


<script>

// 在服务器 使用 name="file" 来接受文件
crearteUploader("input-id1", 'btn-id1', 'upload-img1', 'progress-bar1');

// inputId: 关联input的id; btnId; imgClass; progressClass
function crearteUploader(inputId, btnId, imgClass, progressClass) {
	
	var uploadOpt = {
		runtimes : 'html5,flash,silverlight,html4',
		browse_button : btnId, // you can pass an id...
		//container: document.getElementById('container'), // ... or DOM Element itself
		url : '/image/upload',
		auto: true,
		flash_swf_url : '/static/lib/plupload/js/Moxie.swf',
		silverlight_xap_url : '/static/lib/plupload/js/Moxie.xap',
		
		filters : {
			max_file_size : '10mb',
			mime_types: [
				{title : "Image files", extensions : "jpg,gif,png,jpeg"},
				{title : "Zip files", extensions : "zip"}
			]
		},

		init: {
			PostInit: function() {
			},

			FilesAdded: function(up, files) {
				plupload.each(files, function(file) {
					var img = $('#' + imgClass)[0];
					
					if(URL && URL.createObjectURL){
						img.src = URL.createObjectURL(file.getNative());
					}else if(FileReader) {
						var fileRead = new FileReader();

						fileRead.onload = function() {
							img.src = fileRead.result;
						};

						fileRead.readAsDataURL(file.getNative());
					}
				});
				up.start();
			},

			UploadProgress: function(up, file) {
				var per = file.percent + "%";
				var perEle = $("#" + progressClass)[0];
				perEle.innerHTML = per;
				perEle.style.width = per;
			},

	        FileUploaded: function(up, file, info) {
				// Called when file has finished uploading
				// 检查
				var d = JSON.parse(info.response);
				if(d.code == 200) {
					// 成功
					$("#" + inputId)[0].value = d.data.fileUrl;
				} else {
					// 失败
				}
				
	        },


			Error: function(up, err) {
				//document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));
			}
		}
	};
	
	var uploader = new plupload.Uploader(uploadOpt);

	uploader.init();
	
}

</script>